<template>
  <div class="Yqfw">
    <p class="Yqfw_title">疫情服务</p>
    <div class="Yqfw_box">
      <div class="Yqfw_cont" @click="handleHeat">
        <div class="yqfw_heat_no" :class="{ 'yqfw_heat' : heat}"></div>
        <div class="Yqfw_info">
          <p class="Yqfw_p">
            <span class="heat">{{serveData.hospitalIshavefevcli}}</span> 个
          </p>发热门诊
        </div>
      </div>
      <div class="Yqfw_cont" @click="handleHospital">
        <div class="yqfw_hospital_no" :class="{ 'yqfw_hospital' : hospital}"></div>
        <div class="Yqfw_info">
          <p class="Yqfw_p">
            <span class="hospital">{{serveData.hospitalIscore}}</span> 个
          </p>定点医院
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { ZhtsServer } from '@/api/installServer';
import MapCommon from '@/util/MapCommon';
@Component({
  name: 'Yqfw',
  components: {},
  mixins: [MapCommon],
})
export default class Yqfw extends Vue {

  private serveData: any = {
    hospitalIshavefevcli: 0,
    hospitalIscore: 0,
  };
  private MapComp: any;
  private heat: boolean = false;
  private hospital: boolean = false;
  private districtCode: string = '110000';
  public cleardata() {
    this.hospital = false;
    this.heat = false;
    this.MapComp.removePointLayer();
  }
  private handleHeat() {
    this.heat = !this.heat;
    this.hospital = false;
    if (this.heat) {
      this.MapComp.removePointLayer();
      this.MapComp.addPointByType(this.districtCode, 'hospitalIshavefevcli');
      this.$store.dispatch("ZhtsModule/setQunyiqingType", 'hospitalIshavefevcli' );
    } else {
      this.$store.dispatch("ZhtsModule/setQunyiqingType", '' );
      this.MapComp.removePointLayer();
    }

    // 清除另一組選中 杜志勛補充 2020/2/7
    this.$emit('fatherMethod', 'hello');
  }
  private handleHospital() {
    this.hospital = !this.hospital;
    this.heat = false;
    if (this.hospital) {
      this.MapComp.removePointLayer();
      this.MapComp.addPointByType(this.districtCode, 'hospitalIscore');
      this.$store.dispatch("ZhtsModule/setQunyiqingType", 'hospitalIscore' );
    } else {
      this.$store.dispatch("ZhtsModule/setQunyiqingType", '' );
      this.MapComp.removePointLayer();
    }
    // 清除另一組選中 杜志勛補充 2020/2/7
    this.$emit('fatherMethod', 'hello');
  }

  @Watch('$store.state.ZhtsModule.crowdedPlace')
  private getDistrict() {
    const resData = this.$store.state.ZhtsModule.crowdedPlace;
    this.serveData.hospitalIshavefevcli = resData.hospitalIshavefevcli || 0;
    this.serveData.hospitalIscore = resData.hospitalIscore || 0;
  }

  @Watch('$store.state.ZhtsModule.district')
  private getDistrictCode() {
    this.districtCode = this.$store.state.ZhtsModule.district.id;
  }

  private getComponent() {
    const self: any = this;
    const modules = self.$ioc.resolve('GISModules-map');
    const component = modules.eventSituation.getComponent('compresituation');
    return component;
  }

  private mounted() {
    (this as any).resolveMap('map').then(() => {
      this.MapComp = this.getComponent();
      this.MapComp.load();
    });
  }

  private created() {
    this.districtCode = this.$store.state.ZhtsModule.district.id;
    this.getDistrict();
  }
}
</script>
<style lang="less" scoped>
.Yqfw {
  width: 440px;
  color: aliceblue;
  margin-bottom: 20px;
  margin-top: 10px;
}

.Yqfw_title {
  margin-left: 28px;
  font-size: 20px;
  // font-weight: bold;
}

.Yqfw_box {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  &::after{
    width: 100%;
    bottom: 0;
    position: absolute;
    content: '';
    display: inline-block;
    height: 2px; 
    background: -moz-linear-gradient(left,  transparent 0%, #16dfef 50%, transparent 100%);
    background: -webkit-linear-gradient(left,  transparent 0%,#16dfef 50%,transparent 100%);
    background: -o-linear-gradient(left,  transparent 0%,#16dfef 50%,transparent 100%);
    background: -ms-linear-gradient(left,  transparent 0%,#16dfef 50%,transparent 100%);
    background: linear-gradient(to right,  transparent 0%,#16dfef 50%,transparent 100%);

  }
}

.Yqfw_cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.yqfw_heat_no {
  width: 100px;
  height: 100px;
  background: url('../../../assets/img/zhts/yqfw_heat_no.png') no-repeat 0 0;
  background-size: 100% 100%;
}

.yqfw_heat {
  width: 100px;
  height: 100px;
  background: url('../../../assets/img/zhts/yqfw_heat.png') no-repeat 0 0;
  background-size: 100% 100%;
}

.yqfw_hospital_no {
  width: 100px;
  height: 100px;
  background: url('../../../assets/img/zhts/yqfw_hospital_no.png') no-repeat 0 0;
  background-size: 100% 100%;
}

.heat {
  color: #e8643d;
  font-weight: bold;
  margin-right: 4px;
  font-size:20px;
}

.hospital {
  color: #23b3ff;
  font-weight: bold;
  margin-right: 4px;
  font-size:20px;
}

.yqfw_hospital {
  width: 100px;
  height: 100px;
  background: url('../../../assets/img/zhts/yqfw_hospital.png') no-repeat 0 0;
  background-size: 100% 100%;
}

.Yqfw_info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.Yqfw_p {
  display: flex;
  justify-content: center;
}
</style>
